<template>
	
	<view class="container">
		<view class="navbar" v-if="!loginStatus">
			<uni-nav-bar leftIcon="back" :title="userName"></uni-nav-bar>
		</view>
		<view class="navbar" v-if="loginStatus">
			<uni-nav-bar leftIcon="back" :title="userName" rightIcon="bars"></uni-nav-bar>
		</view>
		<view class="header" >
			<view class="userInfo">
				<image class="portarit" mode="aspectFill" :src="portaritSrc"/>
				<text class="userName" v-text="userName"></text>
			</view>
		</view>
		<view class="title">
			品牌简介
		</view>
		<view class="body">
			<view class="tab">
				<view class="img-box"  @click="changeTabIndex(0)"  v-show="tabIndex==1" >
					<image class="icon" mode="heightFix" src='@/static/icons/noun.png'></image>
				</view>
				<view class="img-box" @click="changeTabIndex(1)" v-show="tabIndex==1" >
					<image class="icon" mode="heightFix" src='@/static/icons/user-active.png' ></image>
				</view>
				<view class="img-box" @click="changeTabIndex(0)" v-show="tabIndex==0">
					<image class="icon"  mode="heightFix" src='@/static/icons/noun-active.png' ></image>
				</view>
				<view class="img-box"  @click="changeTabIndex(1)" v-show="tabIndex==0" >
					<image class="icon" mode="heightFix" src='@/static/icons/user.png'></image>
				</view>
				
			</view>
			<view class="content">
				<home-product-show-list v-show="tabIndex==0" ></home-product-show-list>	
				<home-user-un-login v-show="tabIndex==1&&!loginStatus"></home-user-un-login>
				<home-user-login v-show="tabIndex==1&&loginStatus"></home-user-login>
				<view class="join-member" v-show="!loginStatus&&tabIndex==1">
					<button class="join-box">立即加入 解锁权益</button>
				</view>
				 
				
			</view>
		</view>
	</view>
</template>

<script>
	// 头部导航栏
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {isLogin} from '@/utils/login.js';
	import homeProductShowList from '@/components/home-product-show-list/home-product-show-list.vue';
	import homeUserUnLogin from '@/components/home-user-un-login/home-user-un-login.vue'
	import homeUserLogin from '@/components/home-user-login/home-user-login.vue'
	export default {
		data() {
			return {
				// 头像地址
				portaritSrc:'../../static/pics/face.png',
				// 用户名
				userName:'members',
				// 用户是否登录
				loginStatus : false,
				
				// tabIndex 0 显示商品 1 显示个人中心
				tabIndex:1 ,
				
			}
		},
		components: {uniNavBar,homeProductShowList,homeUserUnLogin,homeUserLogin},
		created(){
			this.LoginStatus =isLogin() ;
		},
		
		methods: {
			//查看用户登录状态
			isLogin(){
				uni.getStorage({
					key:"isLogin" ,
					success:(res)=>{
						if(res){
						 this.isLogin= true ;
						}else{
							this.isLogin = false ;
						}
					}
					
				})
			},
			changeTabIndex(index){
				
				this.tabIndex = index ;
				
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
	background-color: #f6f6f6;
	.header{
		height: 284upx;
		background-image:url('../../static/pics/header-bg.png');
		.userInfo{
			padding-left:42upx;
			padding-top:190upx;
			display: flex;
			flex-direction: row;
		.portarit{		
			width: 154upx;
			height: 154upx;
			border-radius: 50%;
		}
		.userName{
			margin-left: 20upx;
			line-height: 154upx;
			font-size: 22upx;
			color:#F1F1F1
		}
		}
		
	}
	.title{
		line-height: 160upx;
		font-family: PingFangSC-Regular;
		font-size: 24upx;
		padding-left: 40upx;
	}
	.body{
		height:calc(100vh - 444upx) ;
		border-radius: 32upx 32upx 0 0;
		background-color: white;
		.tab{
			display: flex;
			flex-direction: row;
			height: 80upx;
			border-bottom: 1px solid #D8D8D8;
			.img-box{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				.icon{
					height: 48upx;
				}
			}
			
		}
		.content{
			padding-top: 20upx;
			
			.join-member{
				position: absolute;
				bottom: 44upx;
				left:50%;
				transform: translateX(-50%);
				.join-box{
					width: 560upx;
					height: 96upx;
					text-align: center;
					line-height: 96upx;
					border-radius: 48upx;
					background-color: #FFE256;
					font-size: 36upx;
					font-weight: 500;
					font-family: PingFangSC-Regular, PingFang SC;
				}
			}
			
			
			
		}				
	}
	}

</style>
